<template>
    <div style="height: 100%; position: relative">
        <el-drawer
			:title="title"
            :before-close="handleClose"
            :visible.sync="show_dialog"
            direction="rtl"
			size="60%;overflow-y:scroll"
            custom-class="demo-drawer"
            ref="drawer"
            class="head-box"
        >
            <div class="demo-drawer__content">
                <el-form :model="form" ref="form" id="form">
                    <div>
                        <el-form-item
                            :label-width="formLabelWidth"
                            prop="member_name"                            
                            :rules="[
                            { required: true, message: '请输入会员名', trigger: 'blur' }
                            ]">
                        <span class="start">*</span>
                        <span>会员名：</span>
                            <el-input
                                v-model="form.member_name"
                                autocomplete="off"
                                autosize
                                :disabled="form.member_id?true:false"
                            ></el-input>
                        </el-form-item>
                        <el-form-item
                            v-if="form.member_id"
                            :label-width="formLabelWidth"
                            prop="member_passwd"
                            >
                        <span class="start">*</span>     
                        <span>密码：</span>
                            <el-input
                                v-model="form.member_passwd"
                                autocomplete="off"
                                show-password
                            ></el-input>
                        </el-form-item>
                        <el-form-item
                            v-else
                            :label-width="formLabelWidth"
                            prop="member_passwd"
                            :rules="[
                            { required: true, message: '请输入密码', trigger: 'blur' }
                            ]">
                        <span class="start">*</span>     
                        <span>密码：</span>
                            <el-input
                                v-model="form.member_passwd"
                                autocomplete="off"
                                show-password
                            ></el-input>
                        </el-form-item>
                        <el-form-item
                            :label-width="formLabelWidth"
                            prop="member_mobile"
                            :rules="[
                            { required: true, message: '请输入手机号', trigger: 'blur' },
                            { pattern: /^((0\d{2,3}-\d{7,8})|(1[35784]\d{9}))$/, message: '请输入正确的手机号码', trigger: ['blur', 'change'] }
                            ]">
                        <span class="start">*</span>    
                            <span>手机号：</span>
                            <el-input
                                v-model="form.member_mobile"
                                autocomplete="off"
                                :disabled="form.member_id?true:false"
                            ></el-input>
                        </el-form-item>                       
                        <el-form-item
                            :label-width="formLabelWidth"
                            prop="member_email"
                            :rules="[
                            { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                            { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
                            ]">
                        <span class="start">*</span>    
                            <span>邮箱：</span>
                            <el-input
                                v-model="form.member_email"
                                autocomplete="off"
                            ></el-input>
                        </el-form-item>   
                        <el-form-item
                            :label-width="formLabelWidth">
                            <span>真实姓名：</span>
                            <el-input
                                v-model="form.member_truename"
                                autocomplete="off"
                            ></el-input>
                        </el-form-item>
                        <el-form-item
                            :label-width="formLabelWidth">
                            <span>性别：</span><br>
                            <el-radio-group v-model="member_sex" style="margin-left:5px">
                                <el-radio :label="0" >保密</el-radio>
                                <el-radio :label="1" >男</el-radio>
                                <el-radio :label="2" >女</el-radio>
                            </el-radio-group>
                        </el-form-item> 
                    </div>  
                    <div>                                         
                        <el-form-item
                            :label-width="formLabelWidth">
                            <span>QQ：</span>
                            <el-input
                                v-model="form.member_qq"
                                autocomplete="off"
                            ></el-input>
                        </el-form-item> 
                        <el-form-item
                            :label-width="formLabelWidth">
                            <span>阿里旺旺：</span>
                            <el-input
                                v-model="form.member_ww"
                                autocomplete="off"
                            ></el-input>
                        </el-form-item>
                        <el-form-item
                            :label-width="formLabelWidth">
                            <span>MSN：</span>
                            <el-input
                                v-model="form.member_msn"
                                autocomplete="off"
                            ></el-input>
                        </el-form-item>
                        <el-form-item :label-width="formLabelWidth">
                            <span>头像：</span>                              
                                <el-upload
                                class="upload-demo"
                                accept="image/png,image/jpg,image/jpeg"
                                ref="upload"
                                :url="form.member_avatar"
                                :file-list="fileLists"
                                action="#"
                                :on-change="handlePreview"
                                :on-remove="handleRemove"
                                list-type="picture-card"
                                :limit="1"
                                :on-exceed="fileExceed"
                                :auto-upload="false">
                                <i class="el-icon-plus"></i>
                                </el-upload>
                        </el-form-item>                        
                        <el-form-item
                            :label-width="formLabelWidth"
                            v-if="form.member_id">
                            <span>是否允许登录：</span>                            
                            <el-switch v-model="form.member_state" active-value='1' inactive-value='0'>
                            </el-switch>                         
                        </el-form-item>                                                                                              
                 </div>
                </el-form>
                <div class="demo-drawer__footer" style="margin:20px 0 0 80px;">
                    <el-button @click="cancelForm">取 消</el-button>
                    <el-button
                        type="primary"
                        @click="submitForm('form')"
                        :loading="loading"
                        >{{ loading ? "提交中 ..." : "确 定" }}</el-button
                    >
                </div>
            </div>
        </el-drawer>
    </div>
</template>
<script>
export default {
    data() {
        return {
            loading: false,
            title:'',
            fileLists: [{}],
            radio:0,
            member_sex:'',
            src:'',
            form:{
                member_id: '',
                member_name: '',
                member_passwd: '',
                member_email: '',
                member_mobile: '',
                member_truename: '',
                member_sex:0,
                member_qq: '',
                member_ww: '',
                member_msn:'',
                member_avatar:'',
                member_state:''
            },
            radio:0,
            formLabelWidth: '80px',
			timer: null,
			show_dialog:false,
			type:'add'
        };
	},
	created(){
       // console.log('created',this);
	},
    methods: {
		show_dialog_fn(data){
			if(data){
				this.title = '编辑会员';
                this.form.member_id = data;
                this.getmember(this.form.member_id);
			}else{
                this.title = '添加会员';
            }
			this.show_dialog = true;
        },
        // 新增会员
        submitForm(formName){
            console.log(this.fileLists)
            this.loading = true;
            var data = this.form;
            var formData=new FormData();
            console.log(this.fileLists);
            if(this.fileLists[0]){
                   formData.append("member_avatar",this.fileLists[0].raw); 
            }        
            formData.append("member_name",data.member_name);   
            formData.append("member_id",data.member_id);   
            formData.append("member_passwd",data.member_passwd);    
            formData.append("member_email",data.member_email);
            formData.append("member_mobile",data.member_mobile);
            formData.append("member_truename",data.member_truename);
            formData.append("member_sex",this.member_sex);
            formData.append("member_qq",data.member_qq);
            formData.append("member_msn",data.member_msn);
            formData.append("member_ww",data.member_ww);
            formData.append("member_state",data.member_state);
            setTimeout(() => {
                this.loading = false;
            }, 400);            
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if(this.form.member_id){
                        this.$http.post('/admin/member/index.php?act=memberManage&op=edit',formData).then((res)=> {
                            console.log(res);
                            if (res.code == 1) {
                                this.$message({
                                    showClose: true,
                                    message: '操作成功',
                                    type: 'success'
                                });
                                this.$emit("closeEdit");
                                setTimeout(() => {
                                    this.show_dialog = false;
                                    this.$refs.upload.clearFiles();
                                }, 1000);  
                            }else {
                                this.$message({
                                    showClose: true,
                                    message: res.msg,
                                    type: 'error'
                                });                    
                            }
                        }) 
                    }
                } else {
                  return false;
                }
            });                  
        },
        // 获取会员信息
        getmember(id){
            this.$http.post('/admin/member/index.php?act=memberManage&op=detail',{member_id:id}).then((res)=> {
                console.log(res);
                if (res.code == 1) {
                    this.form = res.data;
                    this.form.member_passwd = '';
                    this.member_sex = parseInt(res.data.member_sex);
                    this.src = res.data.member_avatar;
                    this.fileLists=[{name:res.data.member_avatar,url:res.data.member_avatar}];
                    console.log(this.fileLists);
                }else {
                    alert(res.msg);
                }
            })            
        },
        handleClose(done) {
			//done 用于关闭 Drawer
            if (this.loading) {
                return;
            }
            this.$confirm('确定要关闭表单吗？')
                .then(_ => {
                    // this.loading = true;
                    // this.timer = setTimeout(() => {
                        done();
                        // 动画关闭需要一定的时间
                        // setTimeout(() => {
                        //     this.loading = false;
                        // }, 400);
                    // }, 2000);
                    this.form = {};
                    this.$refs.upload.clearFiles();
                })
                .catch(_ => { });
        },     
        cancelForm() {
            this.loading = false;
            this.show_dialog = false;
            this.form = {};
            this.$refs.upload.clearFiles();
            clearTimeout(this.timer);
        },
        handleRemove(file, fileList) {
                        this.fileLists = fileList;
                    },
        handlePreview(file, fileList) {
                        let that = this;
                console.log(fileList)
                        if (file.raw.type !== 'image/jpg' && file.raw.type !== 'image/png') {
                            that.$message.error('图片只能是jpg/png格式!');
                            return;
                        }
                        if (file.raw.size > 1024 * 1024 * 2) {
                            that.$message.error('上传文件大小不能超过 2MB!');
                            return;
                        }
                        that.fileLists = fileList;
                    },
        fileExceed:function(files, fileList){
                        this.$message.warning(`当前限制选择1个文件，本次选择了 ${files.length} 个文件，共选择了 ${fileList.length} 个文件`)
                    },   
    }
};
</script>
<style lang="scss" scoped>
#form{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}
#form>div{
    width: 45%;
}
.el-form-item{
    span{
        margin-top: 5px;
    }
    .rules-span{
      display: none;
    }
}
.rules-member1{
    position: absolute;
    // left: 430px;
    width: 100px;
    top: 35px;
    color: #F56C6C;
}
// .rules-member >>> .el-input__inner {
.rules-member /deep/.el-input__inner{
    border: 1px solid #F56C6C;
}
.el-form-item__content{
    line-height: 30px;
}
#el-drawer__title{
    padding-bottom: 10px;
}
#el-drawer__header {
    margin-bottom: 15px;
}
.start{
    color: red;
}
</style>